<template>
    <div id="findPwd">
        <div class="findPwd_box">
            <img src="../../assets/logo.png">            
        </div> 
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">手&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;号：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="phone" ref="phoneName" regex="mobile" placeholder="请输入手机号码"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">新&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码：</span>
                <yd-input slot="right" type="password" required :show-required-icon='false' v-model="memberPasswd" placeholder="请输入不少于6位的新密码"></yd-input>
            </yd-cell-item>
            <!-- <yd-cell-item>
                <span slot="left">确&nbsp;认&nbsp;密&nbsp;码：</span>
                <yd-input slot="right" type="password" required :show-required-icon='false' v-model="memberPasswdConfirm" placeholder="请输入确认密码"></yd-input>
            </yd-cell-item> -->
            <yd-cell-item>
                <span slot="left">手机验证码：</span>
                <input type="text" maxlength="6" slot="right" v-model="phoneCode" placeholder="请输入验证码">
                <!-- ↓↓关键代码是这里↓↓ -->
                <yd-sendcode slot="right" init-str="发送验证码" v-model="phoneStart" @click.native="phoneCodeBtn" type="danger" run-str="{%s}S"></yd-sendcode>
                <!-- ↑↑关键代码是这里↑↑ -->
            </yd-cell-item>
        </yd-cell-group>
        <div class="findPwd_btn">
            <yd-button size="large" @click.native="upDatePwd" bgcolor="#ef4f4f" color="#FFF">
                <span>确定</span>
            </yd-button>
        </div>
    </div>
</template>

<script>

export default {
    name: 'forgetPwd',
    data() {
        return {
            memberPasswd: '',
            memberPasswdConfirm: '',
            phone: '',
            phoneCode: '',
            phoneStart: false
        }
    },
    methods: {
        upDatePwd() {
            // 手机号码的有效性CHECK            
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            // 密码CHECK
            if (this.memberPasswd == '') {
                this.$dialog.toast({
                    mes: '密码不可为空',
                    timeout: 1500
                });
                return false;
            }
            if (this.memberPasswd.length < 6) {
                this.$dialog.toast({
                    mes: '密码位数不能少于6位',
                    timeout: 1500
                });
                return false;
            }
            if(/([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z])/.exec(this.memberPasswd)){
                // return true
            } else {
                this.$dialog.toast({
                    mes: '密码必须是由至少6位的数字和字母组成',
                    timeout: 1500
                });
                return false;
            }
            // if (this.memberPasswdConfirm == '') {
            //     this.$dialog.toast({
            //         mes: '确认密码不可为空',
            //         timeout: 1500
            //     });
            //     return false;
            // }
            // if (this.memberPasswd !== this.memberPasswdConfirm) {
            //     this.$dialog.toast({
            //         mes: '两次输入的密码不一致',
            //         timeout: 1500
            //     });
            //     return false;
            // }
            // 手机验证码的有效性CHECK  
            if (this.phoneCode == '') {
                this.$dialog.toast({
                    mes: '手机验证码不可为空',
                    timeout: 1500
                });
                return false;
            }

            this.$dialog.loading.open('正在更新');
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'member/updateMemberPasswd?memberPasswd=' + this.memberPasswd + '&mobile=' + this.phone + '&code=' + this.phoneCode)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.msg == 'SUCCESS') {
                            this.$dialog.toast({
                                mes: '恭喜您，密码修改成功！<br>请使用修改后的密码进行登录。',
                                timeout: 1500
                            });
                            // 清空登录用户的信息 userid
                            this.$store.commit('userid', '');
                            this.$router.go(-1);
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '找回密码失败，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        //短信验证码
        phoneCodeBtn() {
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            this.phoneStart = true;
            this.$dialog.loading.open('发送中...');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/sendCode?channel=' + this.phone + '&type=0')
                .then((response) => {
                    if (response.status == 200) {
                        this.$dialog.loading.close();
                        if (response.data.msg == 'SUCCESS') {

                            this.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        } else {
                            this.$dialog.toast({
                                mes: '发送失败，请联系客服',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '请求错误，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        }
    }
}
</script>

<style scoped>
#findPwd {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.findPwd_box {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.findPwd_box img {
    display: block;
    height: 2.6rem;
    margin: 0.1rem auto;
}

.findPwd_btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.24rem;
}

.yd-cell-right .yd-btn {
    position: absolute;
    right: 0.24rem;
    top: 0.18rem;
}
</style>